<template>
	<div class="ks_body">
		<div class="banner">
			<image :src="dateInfo.banner2" mode="widthFix"></image>
		</div>
		<div class="container">
			<div class="setp1">
				<h3 class="step_title"><span>step1</span> 选择建议部门(必填)</h3>
				<div class="btns">
					<div class="btn" v-for="(btn,index) in dateInfo.bmIntro" :key="index" :class="selectBm == btn.bm ? 'select' : ''" @click="selectBm = btn.bm">
						<div class="circle">
							<u-icon name="checkmark" color="#f56c6c" size="18" v-if="selectBm == btn.bm"></u-icon>
						</div>
						<div class="detail">
							<h4>{{btn.bm}}</h4>
							<p>{{ btn.intro }}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="step2">
				<h3 class="step_title"><span>step2</span> 输入建议内容</h3>
				<div class="formBox">
					<div class="inp">
						<u-divider text="请详细描述(必填)" textPosition="left" textColor="#d6171c" lineColor="#d6171c"></u-divider>
						<u--textarea v-model="question.intro" placeholder="请详细描述(必填项)" maxlength="300" count></u--textarea>
					</div>
					<div class="inp">
						<u-divider text="上传图片(选填)" textPosition="left"></u-divider>
						<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								:previewFullImage="true"
								:maxCount="1"
								accept="image"
							></u-upload>
					</div>
				</div>
			</div>
			
			<div class="step3">
				<h3 class="step_title"><span>step3</span> 输入个人信息</h3>
				<div class="formBox">
					<div class="textInfo">
						<u--text type="warning" :text="dateInfo.pInfo"></u--text>
					</div>
					<div class="inp">
						<u-divider text="您的姓名" textPosition="left"></u-divider>
						<u--input placeholder="请输入姓名" border="surround" clearable v-model="username" :disabled="niming"></u--input>
					</div>
					<div class="inp">
						<u-divider text="您的班级" textPosition="left"></u-divider>
						<u--input placeholder="请输入班级" border="surround" clearable v-model="banji" :disabled="niming"></u--input>
					</div>
					<div class="nimingBox">
						<div class="label">匿名发布</div>
						<u-switch v-model="niming" activeColor="#f56c6c"></u-switch>
					</div>
					<div class="btnBox">
						<u-button type="error" text="提交" @click="subInfo()"></u-button>
					</div>
				</div>
			</div>
		</div>
		<u-divider text="分割线" :hairline="true" :dot="true"></u-divider>
		<div class="bottom">
			<image :src="dateInfo.intro" mode="widthFix"></image>
		</div>
		<u-popup :show="subend" @close="subend=false"  mode="center" :safeAreaInsetBottom="false">
			<div class="popContent">
				<h4>提交成功</h4>
				<p>感谢您提交的建议<br>我们会尽快给您回复！</p>
			</div>
		</u-popup>
		
		
		<div class="popup" v-if="showPrivacy">
			<div class="popBox">
				<div class="poptext">您在使用【上岸数据助手】服务之前，请自仔细阅读《上岸数据助手小程序隐私保护指引》。如您同意《上岸数据助手小程序隐私保护指引》，请点击同意开始使用【上岸数据助手】。</div>
				<div class="btns">
					<div class="btn"><u-button type="primary" size="small" @tap="handleOpenPrivacyContract">查看隐私协议</u-button></div>
					<div class="btn"><u-button type="error" size="small" id="agree-btn" open-type="agreePrivacyAuthorization" @click="handleAgreePrivacyAuthorization">同意</u-button></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		name: 'headcomd',
		data() {
			return {
				openid: "",
				banner: "https://www.baixuemianshi.com/zhuanti/images/banner_ks.jpg?" + new Date(),
				dateInfo: "",
				btnColor: ['primary', 'success', 'warning', 'error'],
				selectBm: "",
				question: {
					intro: "",
					img: ""
				},
				fileList1: [],
				username: "",
				banji: "",
				subend:false,
				time: "",
				
				showPrivacy:false,
				niming: false
			};
		},
		onShareAppMessage(options) {},
		onShareTimeline(res) {},
		onLoad(options) {
			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: res => {
						console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
						if (res.needAuthorization) {
							// 需要弹出隐私协议
							this.showPrivacy = true
						} else {
							
						}
					},
					fail: () => {},
					complete: () => {}
				})
			}
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
		},
		mounted() {
			let that = this

		},

		created() {
			
			this.getBms()
		},
		methods: {
			...mapActions(['LogSetPhone']),
			handleAgreePrivacyAuthorization() {
				this.showPrivacy = false
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			getBms() {
				let that = this
				uni.request({
					url: 'https://www.baixuemianshi.com/zhuanti/kesu/js/index.js',
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.dateInfo = resjson
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.question.img = lists[i].url.split('tmp/')[1]
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://www.baixuemianshi.com/zhuanti/kesu/xcx.php', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			
			addPath(tempFilePaths){
				let that = this
				let path = tempFilePaths.split('tmp/')[1]
				console.log(path)
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu
				return time
			},
			subInfo(){
				let that = this
				if(!that.userphone){
					uni.navigateTo({
						url: '../../my/login?navTlt=客诉'
					});
					return
				}
				if(!that.selectBm){
					uni.showToast({
						title:"未选择部门",
						icon:"error"
					})
					return
				}
				if(!that.question.intro){
					uni.showToast({
						title:"未输入描述",
						icon:"error"
					})
					return
				}
				if(!that.niming && !that.username){
					uni.showToast({
						title:"未输入姓名",
						icon:"error"
					})
					return
				}
				if(!that.niming && !that.banji){
					uni.showToast({
						title:"未输入班级",
						icon:"error"
					})
					return
				}
				db.collection('kesu').add({
					data:{
						bumen: that.selectBm,
						intro: that.question.intro,
						img: that.question.img,
						phone: that.userphone,
						name: that.niming ? '匿名': that.username,
						banji: that.niming ? '匿名': that.banji,
						time: that.getTime(),
						type: "工作建议",
						answer: "",
						reply:"",
						degree: ""
					},
					success: function(res){
						that.subend= true
						that.selectBm= ""
						that.question.intro = ""
						that.question.img = ""
						that.fileList1 = []
					}
				})
			}
		},
		components: {}
	};
</script>

<style>
	@import url("./index.css");
</style>